<template>
  <div class="top">
     <van-search
    v-model="value"
    show-action
    placeholder="请输入搜索关键词"
    @search="onSearch"
    @cancel="onCancel"
  />
  </div>
</template>

<script>
import { mhSerchApi } from '../../api/data';
import {Toast } from "vant";
import { mapActions,mapState } from 'vuex';
 export default {
 data() {
    return {
      value: '',
    };
  },
  methods: {
    ...mapActions(["setSerchKey"]),
   async onSearch() {
        let{ value } = this
       if(value.trim() === "")
       {
        this.setSerchKey("");
         Toast("请输入内容再进行检索")
         return
       }
       this.$emit('serch',[]);
       let origin = await mhSerchApi(value)
       let {data,code} = origin.data
       if(code === 0)
       {
          this.setSerchKey(value);
         this.$emit("serch",data);
       }else
       {
         Toast.fail("服务器出错")
       }
    },
  // onSearch()
  // {
  //   let {value} = this
  //   console.log(this.value)
  //   console.log("搜索的值",value)
  //   if(value.trim() === "")
  //   {
  //     this.setSerchKey("")
  //     return
  //   }
  //   this.$emit("serch",[])
  //   mhSerchApi(value).then((res)=>{
  //     let {data,code} = res.data
  //     if(code === 0)
  //     {
  //       this.setSerchKey(value)
  //       this.$emit("serch",data)
  //     }else
  //     {
  //       Toast.fail("服务器出错")
  //     }
  //   })
  // },
    onCancel() {
      Toast('取消');
      this.$router.push({
         path:"/",
      });
    },
  },
  created()
  {
     let {serchKey,onSearch} = this;
     if(serchKey !== "")
     {
      this.value = serchKey
      onSearch();
     }
  },
  computed:{
    ...mapState(["serchKey"])
  }
}
</script>

<style lang="less" scoped>

</style>